<script lang="ts" setup>
import { getHealthSX } from '~/api/home'

const props = defineProps({
  type: {
    type: [Array, String],
    default: () => [],
  },
  isFF: {
    type: Boolean,
    default: false,
  },
})
const inputVal = ref('')
const loading = ref(true)
const list = ref<any[]>([])
const searchValue = ref('')
const hotSearch = ref<string[]>(['高血压', '糖尿病', '冠心病', '关节炎', '胃炎', '哮喘', '肝炎', '艾滋病', '新冠感染'])
// hotSearch.value = ['糖尿病', '结核病', '春日养生', '幽门螺杆菌', '减肥', '高血压', '流感', '过敏']
hotSearch.value = ['原创', '减重', '夏天', '糖尿病', '结核病', '健康', '幽门螺杆菌', '高血压', '过敏']
// 搜索
function onSearch() {
  searchValue.value = inputVal.value
  // getList()
  console.log(window.location.pathname)
  navigateTo({
    path: `/peopleHealth/advancedSearch`,
    query: {
      data: searchValue.value,
      type: props.type,
    },
  })
}
function clearInput() {
  inputVal.value = ''
}
function getHealthSxList() {
  getHealthSX().then((res) => {
    loading.value = false
    list.value = res.data
  }).catch(() => {
    loading.value = false
  })
}
function hotSearchClick(item: any) {
  inputVal.value = item
  navigateTo({
    path: `/peopleHealth/advancedSearch`,
    query: {
      data: inputVal.value,
      type: props.type,
    },
  })
}
getHealthSxList()
</script>

<template>
  <div class="mx-auto" :class="{ 'w-1200px': props.type === '全部', 'w-900px': props.type !== '全部' }">
    <div v-if="props.type !== '全部'" class="mx-auto pt-34px text-18px text-white">
      <span>主办单位：陕西省卫生健康委员会
      </span>
      <span class="ml-50px">承办单位：陕西省健康教育中心</span>
    </div>
    <div class="py-18px">
      <div class="relative flex items-center">
        <div class="right h-70px flex flex-1 items-center bg-#fff py-5px">
          <input v-model="inputVal" placeholder="请输入搜索信息" class="min-w-0 flex-1 indent-16px outline-none">
          <i
            class="i-ri:close-circle-line cursor-pointer text-gray opacity-0" :class="{ 'opacity-100': inputVal }"
            @click="clearInput"
          />
        </div>
        <div
          class="mr-10px h-70px w-160px flex cursor-pointer items-center justify-center text-20px text-#FFF"
          style="background: linear-gradient(159.97deg, rgba(206,234,158,1) -140.78%,rgba(53,179,137,1) 89.45%);"
          @click="onSearch"
        >
          <!-- <i class="i-ri:search-line cursor-pointer text-#fff w-25px h-25px" /> -->
          搜索
        </div>
      </div>
      <div v-if="props.type === '全部'" class="mt-50px w-full flex items-center" :style="isFF ? '' : 'color:#fff'">
        <div class="text-16px text-#27a280 font-700">
          热门搜索：
        </div>
        <span
          v-for="item in hotSearch" :key="item" class="ml-50px cursor-pointer" hover="text-#0E9472"
          @click="hotSearchClick(item)"
        >{{ item }}</span>
      </div>
    </div>
  </div>
</template>

<style></style>
